<template>
  <div class="container">
    <el-row style="background:#FFF;border-radius:8px">
      <!--
             每个col 都是一行
             title 是标题，remark 是备注
             more_title 是右边要显示的文字，如果有这个则显示箭头，如果需要显示箭头又不显示文字，传个空格
             有个right 的插槽，适合右边需要自定义内容的 
         -->
      <el-col :span="12">
        <span class="title float-left" style="color:#000">{{lang._526}}:</span>
        <span class="title float-left">pofeng01</span>
      </el-col>
      <el-col :span="12">
        <span class="title float-left" style="color:#000">{{lang._527}}:</span>
        <span class="title float-left">2017-7-12</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span class="text-left float-left">{{lang._528}}</span>
      </el-col>
    </el-row>
    <el-row style="background:#FFF;border-radius:8px">
      <g-row :lang="lang" :title="lang._529" :remark="lang._530"></g-row>
      <g-row :lang="lang" :title="lang._531" :remark="lang._530"></g-row>
      <g-row :lang="lang" :title="lang._532" :remark="lang._530"></g-row>
      <g-row :lang="lang" :title="lang._533" :remark="lang._530"></g-row>
      <g-row :lang="lang" :title="lang._534" :remark="lang._535"></g-row>
      <g-row :lang="lang" :title="lang._536" remark="可用：108条"></g-row>
    </el-row>
    <el-row>
      <el-col :span="12">
        <span class="text-left float-left">{{lang._537}}</span>
      </el-col>
      <el-col :span="12">
        <el-button class="btn float-right" type="primary" round style="margin-right:10px;">{{lang._474}}</el-button>
        <el-button class="btn float-right" type="text" round style="margin-right:0">{{lang._475}}</el-button>
      </el-col>
    </el-row>
    <el-row style="background:#FFF;border-radius:8px">
      <g-row :lang="lang" :title="lang._538" :more_title="lang._539"></g-row>
      <g-row :lang="lang" :title="lang._540" :more_title="lang._541" :remark="lang._542"></g-row>
      <g-row :lang="lang" :title="lang._543" more_title="已绑定：55503905@qq.com" :remark="lang._544"></g-row>
      <g-row :lang="lang" :title="lang._545" more_title="Tast Of Blue" :remark="lang._546"></g-row>
      <g-row :lang="lang" :title="lang._547" more_title="19959773666" :remark="lang._548"></g-row>
      <g-row :lang="lang" :title="lang._549" :more_title="lang._550" :remark="lang._551"></g-row>
      <g-row :lang="lang" :title="lang._552" more_title="菲律宾塔前中街33号" :remark="lang._553"></g-row>
    </el-row>
    <el-row style="background:#FFF;border-radius:8px;margin-top:10px">
      <el-col span="12">
        <span class="title float-left" style="color:#000">{{lang._554}}</span>
        <span class="remark float-left">{{lang._555}}</span>
      </el-col>
      <el-col span="12">
        <el-button class="float-right btn" type="primary" round>{{lang._556}}</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" scoped>
  .container {
    width: 860px;
    margin: 20px auto;
    .switch {
      margin-top: 10px;
      height: 30px;
      margin-right: 10px;
    }
    .btn {
      margin-top: 10px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    span {
      font-size: 30px;
      color: #323644;
      line-height: 50px;
      margin: 0;
      padding-left: 10px;
    }
    .title,
    .more-title {
      font-size: 15px;
      color: #409EFF;
      font-family: "微软雅黑";
      line-height: 50px;
      margin-left: 10px;
    }
    .remark {
      font-size: 13px;
      color: #a2aebb;
      line-height: 50px;
      font-family: '微软雅黑';
      margin-left: 50px;
    } // .el-tooltip__popper{
    //   padding: 0 !important;
    // }
    // 二维码黑色边框
  }

</style>
<style>
  .el-textarea__inner {
    border: 0px !important
  }

</style>
<script>
  import grow from '../../components/row.vue'
  export default {
    props: ['lang'],
    components: {
      'g-row': grow
    },
  }

</script>
